<template>
  <view class="content pb-50">
    <view class="top-block pt-20 pb-20">
      <view class="search-block pl-20 pr-20">
        <u-search placeholder="请输入隐患名称" v-model="params.htName" action-text="筛选" :action-style="{color: '#3F99F7', fontWeight: '500'}" @focus="closeModal()" @custom="openPopup" @search="submit()"></u-search>
      </view>
      <view class="check-block pt-20 pl-20 pr-20">
        <view class="check-item">检查人：{{params.checkPeoIdName ? params.checkPeoIdName : '---'}}</view>
        <view class="check-item">检查单位：{{params.checkDeptIdName ? params.checkDeptIdName : '---'}}</view>
        <view class="check-item" style="width: 40%;">检查日期：{{params.beginCheckDate ? params.beginCheckDate : '---'}} 至 {{params.endCheckDate ? params.endCheckDate : '---'}}</view>
      </view>
    </view>
    <view v-if="JSON.stringify(list) != '[]'" class="list-block pl-20 pr-20">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index" @click="routeToDetail(item.id)">
        <view class="body-block pb-10">
          <view class="body-item pt-10 pb-10">
            <view class="item-label">隐患名称：</view>
            <view class="item-value">{{item.htName ? item.htName : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">隐患等级：</view>
            <view class="item-value">{{item.levelName ? item.levelName : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">隐患描述：</view>
            <view class="item-value">{{item.description ? item.description : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">检查单位：</view>
            <view class="item-value">{{item.checkDept ? item.checkDept : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">检查人：</view>
            <view class="item-value">{{item.checkPeo ? item.checkPeo : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">检查日期：</view>
            <view class="item-value">{{item.checkDate ? item.checkDate : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">整改人：</view>
            <view class="item-value">{{item.rectificationPeo ? item.rectificationPeo : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">整改期限：</view>
            <view class="item-value">{{item.rectificationLimit ? item.rectificationLimit : '-'}}</view>
          </view>
          <view class="body-item pt-10 pb-10">
            <view class="item-label">状态：</view>
            <view class="item-value">
              <u-tag :text="item.stateName" size="mini" plain :type="item.state == 4 ? 'info' : item.state == 2 || item.state == 5 ? 'warning' : 'primary'"></u-tag>
            </view>
          </view>
          <view v-if="item.deferApproveInfo" class="body-item pt-10 pb-10">
            <view class="item-label">驳回原因：</view>
            <view class="item-value">{{item.deferApproveInfo ? item.deferApproveInfo : '-'}}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
    <u-popup :show="popupState" mode="top" :closeOnClickOverlay="true" :customStyle="{marginTop: '140rpx'}" @close="closePopup">
      <view class="popup-block pd-20">
        <view class="popup-item pt-20 pb-20 border-b-common">
          <view class="item-label">检查单位</view>
          <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=check')">
            <text v-if="params.checkDeptIdName" class="mr-10">{{params.checkDeptIdName}}</text>
            <text v-else class="item-default-text mr-10">请选择检查单位</text>
            <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
          </view>
        </view>
        <view class="popup-item pt-20 pb-20 border-b-common">
          <view class="item-label">检查人</view>
          <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=check')">
            <text v-if="params.checkPeoIdName" class="mr-10">{{params.checkPeoIdName}}</text>
            <text v-else class="item-default-text mr-10">请选择检查人</text>
            <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
          </view>
        </view>
        <view class="popup-item pt-20 pb-20 border-b-common">
          <view class="item-label">检查日期</view>
          <view class="item-select" @click="openCalendar()">
            <text v-if="params.beginCheckDate && params.endCheckDate" class="mr-10">{{params.beginCheckDate ? params.beginCheckDate : '---'}} 至 {{params.endCheckDate ? params.endCheckDate : '---'}}</text>
            <text v-else class="item-default-text mr-10">请选择检查日期</text>
            <u-icon name="calendar" size="46rpx" color="#3F99F7"></u-icon>
          </view>
        </view>
        <view class="button-block pt-20">
          <u-button type="info" text="重置" :custom-style="{width: '340rpx', backgroundColor: '#FFFFFF !important'}" @click="resetForm()"></u-button>
          <u-button type="primary" text="确认" :custom-style="{width: '340rpx'}" @click="submit()"></u-button>
        </view>
      </view>
    </u-popup>
    <u-calendar :show="calendarState" mode="range" color="#3F99F7" monthNum="12" :minDate="minDate" :maxDate="maxDate" :closeOnClickOverlay="true" @confirm="calendarConfirm" @close="calendarClose"></u-calendar>
    <u-picker :show="rectificationPeoIdState" :columns="rectificationPeoList" keyName="label" @confirm="pickerConfirm('rectificationPeoId', $event)" @cancel="pickerCancel('rectificationPeoId')"></u-picker>
    <u-picker :show="rectificationDeptIdState" :columns="rectificationDeptList" keyName="label" @confirm="pickerConfirm('rectificationDeptId', $event)" @cancel="pickerCancel('rectificationDeptId')"></u-picker>
  </view>
</template>

<script>
  import { getDangerListApi } from '@/apis/danger/index.js'
  import { getUserDictListApi, getDeptDictListApi } from '@/apis/danger/common.js'
  import dayjs from 'dayjs'
  
  export default {
    data() {
      return {
        popupState: false,
        calendarState: false,
        params: {
          checkDeptIdName:'',
          checkPeoIdName:'',
          htName: '',
          beginCheckDate: '',
          endCheckDate: '',
          pageNo: 1,
          pageSize: 10
        },
        list: [],
        rectificationPeoIdName: '',
        rectificationDeptIdName: '',
        rectificationPeoIdState: false,
        rectificationPeoList: [],
        rectificationDeptIdState: false,
        rectificationDeptList: [],
        pushState: true,
        minDate: dayjs().subtract(6, 'month').format('YYYY-MM-DD'),
        maxDate: dayjs().add(6, 'month').format('YYYY-MM-DD')
      }
    },
    onPullDownRefresh() {
      this.getDangerList(Object.assign(this.params, {pageNo: 1, pageSize: 10}))
    },
    onReachBottom() {
      if(this.pushState) this.getDangerList(Object.assign(this.params, {pageNo: this.params.pageNo + 1}), false)
    },
    onShow() {
      this.getDeptDictList()
      this.getDangerList(Object.assign(this.params, {pageNo: 1}))
    },
    methods: {
      getDangerList: function(params, freshState = true) {
        let newParams = JSON.parse(JSON.stringify(params))
        Object.assign(newParams, {
          beginCheckDate: newParams.beginCheckDate ? `${newParams.beginCheckDate} 00:00:00` : '',
          endCheckDate: newParams.endCheckDate ? `${newParams.endCheckDate} 00:00:00` : ''
        })
        if(newParams.rectificationDeptIdName) delete newParams.rectificationDeptIdName
        if(newParams.rectificationPeoIdName) delete newParams.rectificationPeoIdName
        getDangerListApi(newParams).then(res => {
          if(freshState) {
            this.pushState = true
            this.list = res.list
          } else {
            this.list = this.list.concat(res.list)
          }
          if(res.list.length < this.params.pageSize) this.pushState = false
          this.popupState = false
          uni.stopPullDownRefresh()
        }).catch(err => console.warn(err))
      },
      getDeptDictList: function() {
        getDeptDictListApi({parentId: 1002}).then(res => {
          if(res.length > 0) res.map(item => Object.assign(item, {label: item.name, value: item.id}))
          this.rectificationDeptList = [res]
        }).catch(err => console.warn(err))
      },
      getUserDictList: function(params) {
        getUserDictListApi(params).then(res => {
          if(res.length > 0) res.map(item => Object.assign(item, {label: item.nickname, value: item.id}))
          this.rectificationPeoList = [res]
        }).catch(err => console.warn(err))
      },
      submit: function() {
        this.getDangerList(Object.assign(this.params, { pageNo: 1 }))
      },
      resetForm: function() {
        Object.assign(this.params, {
          checkPeoIdName:'',
          checkDeptIdName:'',
          htName: '',
          rectificationPeoId: '',
          rectificationDeptId: '',
          beginCheckDate: '',
          endCheckDate: '',
          pageNo: 1
        })
        
        this.params.rectificationDeptIdName = ''
        this.params.rectificationPeoIdName = ''

        this.rectificationPeoIdName = ''
        this.rectificationDeptIdName = ''
        this.getDangerList(this.params)
      },
      openPicker: function(type) {
        this.calendarState = false
        if(this[`${type}List`][0].length) {
          this[`${type}IdState`] = true
        } else {
          uni.showToast({ title: '暂无数据', icon: 'none' })
        }
      },
      pickerConfirm: function(type, event) {
        if(type == 'rectificationDeptId') {
          this.params.rectificationPeoId = ''
          this.rectificationPeoIdName = ''
          this.getUserDictList({ deptId: event.value[0].value })
        }
        this.params[type] = event.value[0].value
        this[`${type}Name`] = event.value[0].label
        this[`${type}State`] = false
      },
      pickerCancel: function(type) {
        this[`${type}State`] = false
      },
      calendarConfirm: function(event) {
        this.params.beginCheckDate = event[0]
        this.params.endCheckDate = event[event.length - 1]
        this.calendarState = false
      },
      calendarClose: function() {
        this.calendarState = false
      },
      openPopup: function() {
        this.popupState = true
      },
      closePopup: function() {
        this.popupState = false
      },
      openCalendar: function() {
        this.rectificationPeoIdState = false
        this.rectificationDeptIdState = false
        this.calendarState = true
      },
      closeModal: function() {
        this.rectificationPeoIdState = false
        this.rectificationDeptIdState = false
        this.calendarState = false
      },
      routeToDetail: function(id) {
        uni.navigateTo({ url: `/pagesDanger/dangerDetail?id=${id}` })
      },
      routeByUrl: function(url) {
        uni.navigateTo({ url })
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
  .u-tag {
    padding: 0 !important;
  }
  .u-button {
    background-color: #3F99F7 !important;
  }
</style>

<style lang="scss" scoped>
  .border-b-common { 
    border-bottom: 1rpx solid #F4F4F4; 
  }
  .content {
    padding-top: 150rpx;
    .top-block {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #FFFFFF;
      overflow: hidden;
      z-index: 11111;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      box-shadow: 0 0 10rpx 0 #F4F4F4;
      .check-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .check-item {
          width: 30%;
          font-size: 24rpx;
          line-height: 32rpx;
          color: #3F99F7;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .list-block {
      .item-block {
        background-color: #FFFFFF;
        border-radius: 6rpx;
        box-shadow: 0 0 10rpx 0 #F4F4F4;
        padding: 25rpx;
        margin-top: 25rpx;
        .header-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .date-block {
            width: 260rpx;
            font-size: 24rpx;
            line-height: 32rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .body-block {
          .body-item {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            display: flex;
            align-items: center;
            .item-label {
              min-width: 150rpx;
            }
            .item-value {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .footer-block {
          @extend .header-block;
          align-items: flex-end;
        }
        .button-block {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .button {
            width: 100rpx;
          }
        }
      }
    }
    .popup-block {
      .popup-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
        }
        .item-select {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
          .item-default-text {
            color: #999999;
          }
        }
      }
      .button-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
  }
</style>
